import BaseChart from '@/components/echarts/BaseChart';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useMonthStore } from '@/stores/monthStore';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';


const Costs = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo
  const curMonth = useMonthStore(state => state.month)

  // 转换数据结构为数组
  const monthData = basicData.monthlyData[curMonth - 1].costs

  const labels: string[] = ['食材', '人力', '经营', '能源', '设备', '财务']
  const costs: number[] = []
  for (const [key, value] of Object.entries(monthData)) {
    if (key !== 'total')
      costs.push(Number((value / 10000).toFixed(2)))
  }

  const options: EChartsOption = {
    title: {
      text: '成本分析',
      top: '8%',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: fontSizeRem(16),
      }
    },
    backgroundColor: '',
    color: '#da974f',
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: labels,
      axisLine: {
        lineStyle: {
          color: "#d2e0f4",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: fontSizeRem(14),
      },
    },
    yAxis: {
      type: "value",
      name: '金额 (万元)',
      splitNumber: 4,
      nameGap: 20,
      nameTextStyle: {
        color: "#fff",
        fontSize: fontSizeRem(14),
      },
      splitLine: {
        lineStyle: {
          color: "#bbb",
        },
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#fff",
        fontSize: fontSizeRem(14),
      },
    },
    series: [
      {
        data: costs,
        type: "bar",
        itemStyle: {
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
  };


  return (
    <>
      <div style={{ width: '100%', height: '28vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default Costs;